<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>法律法规合规性检查</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      padding: 40px;
    }

    h1 {
      color: #333;
      margin-bottom: 60px;
      text-align: center;
      font-size: 64px;
    }

    form {
      background-color: #fff;
      padding: 60px;
      border-radius: 25px;
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
      width: 1000px;
      max-width: 90%;
      box-sizing: border-box;
    }

    .form-group {
      margin-bottom: 50px;
    }

    input[type="file"],
    textarea,
    select {
      width: calc(100% - 44px);
      padding: 30px;
      margin-top: 20px;
      border: 1px solid #ccc;
      border-radius: 20px;
      box-sizing: border-box;
      font-size: 20px;
    }

    label {
      display: block;
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 24px;
    }

    button[type="submit"] {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 30px 60px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 20px;
      transition: background-color 0.3s ease;
    }

    button[type="submit"]:hover {
      background-color: #0056b3;
    }

    .error-message {
      color: red;
      margin-top: 30px;
      font-size: 18px;
    }

    .help-text {
      font-size: 16px;
      color: #777;
      display: block;
      margin-top: 15px;
    }

    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <h1>法律法规合规性检查</h1>
  <form method="post" enctype="multipart/form-data" action="/check" onsubmit="return validateForm()">
    <div class="form-group">
      <label for="law_files">上传法律法规文件（必填）：</label>
      <input type="file" id="law_files" name="law_files" accept=".pdf,.doc,.docx,.txt" required multiple>
      <span class="help-text">支持的格式：<br>PDF、DOC、DOCX及TXT</span>
    </div>
    <div class="form-group">
      <label for="company_option">请选择上传公司文件或输入公司网址：</label>
      <select id="company_option" onchange="toggleCompanyInput(this.value)">
        <option value="">请选择...</option>
        <option value="upload">上传公司文件</option>
        <option value="url">输入公司网址</option>
      </select>
    </div>
    <div id="company_files_group" class="form-group hidden">
      <label for="company_files">上传公司文件：</label>
      <input type="file" id="company_files" name="company_files" accept=".pdf,.doc,.docx,.txt" multiple>
      <span class="help-text">支持的格式：<br>PDF、DOC、DOCX及TXT</span>
    </div>
    <div id="company_urls_group" class="form-group hidden">
      <label for="company_urls">输入公司网址：</label>
      <textarea id="company_urls" name="company_urls" rows="3"></textarea>
    </div>
    <div id="error-message" class="error-message"></div>
    <button type="submit">提交</button>
  </form>

  <script>
    function toggleCompanyInput(value) {
      var companyFilesGroup = document.getElementById('company_files_group');
      var companyUrlsGroup = document.getElementById('company_urls_group');

      if (value === 'upload') {
        companyFilesGroup.classList.remove('hidden');
        companyUrlsGroup.classList.add('hidden');
      } else if (value === 'url') {
        companyFilesGroup.classList.add('hidden');
        companyUrlsGroup.classList.remove('hidden');
      } else {
        companyFilesGroup.classList.add('hidden');
        companyUrlsGroup.classList.add('hidden');
      }
    }

    function validateForm() {
      var lawFiles = document.getElementById('law_files').files.length > 0;
      var companyOption = document.getElementById('company_option').value;

      if (!lawFiles) {
        document.getElementById('error-message').textContent = "请上传法律法规文件";
        return false;
      }

      if (companyOption === '') {
        document.getElementById('error-message').textContent = "请选择上传公司文件或输入公司网址";
        return false;
      }

      document.getElementById('error-message').textContent = "";
      return true;
    }
  </script>
</body>

</html>
